Redesign & Refac Fund, Campaign & Pledge Screen #2064
Conversation
…to re_fund_campaign
WalkthroughThe recent changes revamp the fundraising screens in the application, enhancing user experience with a more intuitive interface. This includes improved translations, refined fund campaign management, and updates to the Changes
Assessment against linked issues
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
Our Pull Request Approval ProcessWe have these basic policies to make the approval process smoother for our volunteer team. Testing Your CodePlease make sure your code passes all tests. Our test code coverage system will fail if these conditions occur:
The process helps maintain the overall reliability of the code base and is a prerequisite for getting your PR approved. Assigned reviewers regularly review the PR queue and tend to focus on PRs that are passing. ReviewersDo not assign reviewers. Our Queue Monitors will review your PR and assign them.
Reviewing Your CodeYour reviewer(s) will have the following roles:
CONTRIBUTING.mdRead our CONTRIBUTING.md file. Most importantly:
Other
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## develop #2064 +/- ##
===========================================
+ Coverage 97.91% 97.94% +0.02%
===========================================
Files 231 230 -1
Lines 6201 6217 +16
Branches 1788 1804 +16
===========================================
+ Hits 6072 6089 +17
+ Misses 118 117 -1
Partials 11 11 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 35
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (32)
- public/locales/en/common.json (1 hunks)
- public/locales/en/translation.json (3 hunks)
- public/locales/fr/common.json (1 hunks)
- public/locales/fr/translation.json (2 hunks)
- public/locales/hi/common.json (1 hunks)
- public/locales/hi/translation.json (2 hunks)
- public/locales/sp/common.json (1 hunks)
- public/locales/sp/translation.json (2 hunks)
- public/locales/zh/common.json (1 hunks)
- public/locales/zh/translation.json (2 hunks)
- src/GraphQl/Queries/fundQueries.ts (3 hunks)
- src/screens/FundCampaignPledge/FundCampaignPledge.module.css (2 hunks)
- src/screens/FundCampaignPledge/FundCampaignPledge.tsx (11 hunks)
- src/screens/FundCampaignPledge/PledgeDeleteModal.test.tsx (2 hunks)
- src/screens/FundCampaignPledge/PledgesMocks.ts (5 hunks)
- src/screens/OrganizationFundCampaign/CampaignDeleteModal.test.tsx (1 hunks)
- src/screens/OrganizationFundCampaign/CampaignDeleteModal.tsx (2 hunks)
- src/screens/OrganizationFundCampaign/CampaignModal.test.tsx (1 hunks)
- src/screens/OrganizationFundCampaign/CampaignModal.tsx (1 hunks)
- src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx (4 hunks)
- src/screens/OrganizationFundCampaign/OrganizationFundCampaign.module.css (5 hunks)
- src/screens/OrganizationFundCampaign/OrganizationFundCampaign.test.tsx (2 hunks)
- src/screens/OrganizationFundCampaign/OrganizationFundCampaignMocks.ts (6 hunks)
- src/screens/OrganizationFunds/FundDeleteModal.test.tsx (1 hunks)
- src/screens/OrganizationFunds/FundDeleteModal.tsx (1 hunks)
- src/screens/OrganizationFunds/FundModal.test.tsx (1 hunks)
- src/screens/OrganizationFunds/FundModal.tsx (1 hunks)
- src/screens/OrganizationFunds/OrganizationFunds.module.css (4 hunks)
- src/screens/OrganizationFunds/OrganizationFunds.test.tsx (1 hunks)
- src/screens/OrganizationFunds/OrganizationFunds.tsx (3 hunks)
- src/screens/OrganizationFunds/OrganizationFundsMocks.ts (4 hunks)
- src/utils/interfaces.ts (5 hunks)
Files not reviewed due to errors (2)
- src/screens/OrganizationFundCampaign/OrganizationFundCampaign.test.tsx (no review received)
- src/screens/FundCampaignPledge/FundCampaignPledge.tsx (no review received)
Files skipped from review due to trivial changes (4)
- public/locales/fr/common.json
- public/locales/sp/common.json
- src/screens/FundCampaignPledge/PledgeDeleteModal.test.tsx
- src/screens/FundCampaignPledge/PledgesMocks.ts
Additional context used
Biome
src/screens/OrganizationFunds/OrganizationFunds.test.tsx
[error] 80-82: Disallow duplicate setup and teardown hooks.
Disallow afterEach duplicacy inside the describe function.
(lint/suspicious/noDuplicateTestHooks)
src/screens/OrganizationFunds/OrganizationFunds.tsx
[error] 165-169: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx
[error] 170-174: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
Additional comments not posted (157)
src/GraphQl/Queries/fundQueries.ts (3)
12-20: LGTM!The addition of the
$orderByparameter andorderByfield enhances the sorting functionality for funds.
40-45: LGTM!The addition of the
$whereand$orderByparameters and fields enhances the filtering and sorting functionality for campaigns associated with a fund.
61-63: LGTM!The addition of the fields
name,fundingGoal, andcurrencyprovides more detailed information about the fundraising campaign.public/locales/zh/common.json (2)
79-79: LGTM!The modification of the value for the key "none" ensures consistency with other translations.
80-80: LGTM!The addition of the key-value pair for "sort" supports the new sorting functionality introduced in the PR.
public/locales/en/common.json (1)
80-80: LGTM!The addition of the key-value pair for "sort" supports the new sorting functionality introduced in the PR.
public/locales/hi/common.json (1)
80-80: LGTM!The addition of the key-value pair for "sort" supports the new sorting functionality introduced in the PR.
src/screens/OrganizationFunds/OrganizationFunds.module.css (2)
41-45: Ensure responsiveness.The
.fundModalclass uses fixed percentages for width and margins. Ensure this styling is responsive across different screen sizes.
55-57: Consider accessibility implications.Removing the outline from input elements can affect accessibility. Ensure that there is an alternative visual indication for focus.
src/screens/OrganizationFundCampaign/OrganizationFundCampaign.module.css (3)
2-2: LGTM!
14-17: LGTM!
27-42: LGTM!src/screens/OrganizationFundCampaign/CampaignDeleteModal.test.tsx (1)
Line range hint
1-99: LGTM!src/screens/OrganizationFunds/FundDeleteModal.test.tsx (1)
1-99: LGTM!src/screens/OrganizationFunds/OrganizationFundsMocks.ts (5)
13-15: LGTM!
22-29: LGTM!
37-44: LGTM!
59-61: LGTM!
105-107: LGTM!src/screens/OrganizationFundCampaign/OrganizationFundCampaignMocks.ts (10)
13-15: LGTM!
47-49: LGTM!
73-75: LGTM!
107-109: LGTM!
141-143: LGTM!
175-177: LGTM!
209-213: LGTM!
229-233: LGTM!
248-249: LGTM!
266-268: LGTM!src/screens/OrganizationFunds/OrganizationFunds.test.tsx (10)
84-87: LGTM!
91-102: LGTM!
114-128: LGTM!
130-148: LGTM!
152-164: LGTM!
168-177: LGTM!
181-184: LGTM!
188-191: LGTM!
195-212: LGTM!
216-233: LGTM!src/screens/OrganizationFunds/FundModal.tsx (4)
57-87: LGTM!
91-135: LGTM!
44-52: LGTM!
24-257: LGTM!src/utils/interfaces.ts (4)
Line range hint
229-237: LGTM!
Line range hint
242-253: LGTM!
264-265: LGTM!
379-381: LGTM!src/screens/OrganizationFunds/FundModal.test.tsx (12)
1-30: Ensure proper imports and mock setupThe initial imports and mock setup look good. However, ensure that all necessary dependencies are correctly imported and mocked.
85-102: LGTM!The
renderFundModalfunction correctly renders theFundModalcomponent with the necessary providers.
104-121: LGTM!The test case correctly verifies that the form fields are populated with the correct values in edit mode.
123-129: LGTM!The test case correctly verifies that the fund name input value is updated when the input value changes.
131-137: LGTM!The test case correctly verifies that the fund reference ID input value is updated when the input value changes.
139-145: LGTM!The test case correctly verifies that the tax deductible switch value is updated when the switch is clicked.
147-153: LGTM!The test case correctly verifies that the default switch value is updated when the switch is clicked.
155-161: LGTM!The test case correctly verifies that the archived switch value is updated when the switch is clicked.
163-185: LGTM!The test case correctly verifies that a fund is created and the appropriate functions are called.
187-212: LGTM!The test case correctly verifies that a fund is updated and the appropriate functions are called.
214-234: LGTM!The test case correctly verifies that errors are handled during fund creation and the appropriate error message is displayed.
236-259: LGTM!The test case correctly verifies that errors are handled during fund update and the appropriate error message is displayed.
src/screens/OrganizationFundCampaign/CampaignModal.test.tsx (13)
1-38: Ensure proper imports and mock setupThe initial imports and mock setup look good. However, ensure that all necessary dependencies are correctly imported and mocked.
80-97: LGTM!The
renderCampaignModalfunction correctly renders theCampaignModalcomponent with the necessary providers.
99-120: LGTM!The test case correctly verifies that the form fields are populated with the correct values in edit mode.
122-128: LGTM!The test case correctly verifies that the funding goal input value is updated when the input value changes.
130-136: LGTM!The test case correctly verifies that the funding goal input value is not updated when the input value is less than or equal to 0.
138-143: LGTM!The test case correctly verifies that the start date input value is updated when a new date is selected.
145-151: LGTM!The test case correctly verifies that the start date input value is handled correctly when set to null.
153-158: LGTM!The test case correctly verifies that the end date input value is updated when a new date is selected.
160-165: LGTM!The test case correctly verifies that the end date input value is handled correctly when set to null.
167-191: LGTM!The test case correctly verifies that a campaign is created and the appropriate functions are called.
193-217: LGTM!The test case correctly verifies that a campaign is updated and the appropriate functions are called.
219-241: LGTM!The test case correctly verifies that errors are handled during campaign creation and the appropriate error message is displayed.
243-265: LGTM!The test case correctly verifies that errors are handled during campaign update and the appropriate error message is displayed.
src/screens/OrganizationFundCampaign/CampaignModal.tsx (2)
1-32: Ensure proper imports and interface definitionsThe initial imports and interface definitions look good. However, ensure that all necessary dependencies are correctly imported and defined.
34-41: LGTM!The
CampaignModalcomponent is correctly defined using theReact.FCtype and receives props defined by theInterfaceCampaignModal.public/locales/zh/translation.json (17)
334-334: Update translation key forfundId.The translation for "基金编号" has been updated to "基金（参考）ID" to provide more clarity.
335-335: Update translation key fortaxDeductible.The translation for "免税额" has been updated to "税前扣除" to improve accuracy.
341-342: Add new translation keys for fund search and status.New keys "按名称搜索" and "未找到基金" have been added to improve the search functionality and user feedback.
345-345: Update translation key forstatus.The translation for "地位" has been updated to "状态" for better clarity.
348-349: Update translation key for fund deletion message.The translation for "您想删除该基金吗？" has been updated to "您确定要删除此基金吗？" to provide a clearer confirmation message.
350-352: Add new translation keys for fund creation dates and view campaigns.New keys "最近创建", "最早创建", and "查看活动" have been added to improve the user interface and functionality.
355-355: Update translation key fortitle.The translation for "筹款活动" has been updated to "募捐活动" to provide more clarity.
358-358: Update translation key forfundingGoal.The translation for "资助目标" has been updated to "资金目标" to improve accuracy.
362-363: Update translation key for campaign deletion message.The translation for "您确定要删除此广告活动吗？" has been updated to "您确定要删除此活动吗？" to provide a clearer confirmation message.
365-367: Update translation keys for campaign creation, update, and deletion.The translations for "创建基金活动", "更新基金活动", and "删除基金活动" have been updated to "创建活动", "更新活动", and "删除活动" for consistency and clarity.
370-370: Add new translation key forselectCurrency.A new key "选择货币" has been added to improve the user interface.
371-376: Add new translation keys for campaign search and sorting.New keys "按名称搜索", "查看承诺", "未找到活动", "最新结束日期", "最早结束日期", "最低目标", and "最高目标" have been added to improve the search functionality and user feedback.
400-401: Add new translation keys for pledge sorting.New keys "最早结束日期" and "活动" have been added to improve the user interface and functionality.
402-404: Add new translation keys for pledge details.New keys "承诺", "结束于", and "筹集到" have been added to improve the user interface and functionality.
331-331: Add new translation key forsort.A new key "种类" has been added to improve the user interface.
331-331: Add new translation key forsort.A new key "种类" has been added to improve the user interface.
370-370: Add new translation key forsort.A new key "种类" has been added to improve the user interface.
public/locales/en/translation.json (7)
329-329: LGTM!The change from "Fund ID" to "Fund (Reference) ID" improves clarity.
343-343: LGTM!The updated deletion confirmation message is clearer and more user-friendly.
344-346: LGTM!The additions of "Created Latest", "Created Earliest", and "View Campaigns" enhance sorting and navigation functionality.
359-361: LGTM!The additions of "Create Campaign", "Update Campaign", and "Delete Campaign" provide clear options for campaign management.
364-365: LGTM!The addition of "View Pledges" enhances navigation functionality.
366-370: LGTM!The additions of "No Campaigns Found", "Latest End Date", "Earliest End Date", "Lowest Goal", and "Highest Goal" enhance sorting options and user feedback.
394-398: LGTM!The additions of "Earliest End Date", "Campaigns", "Pledges", "Ends on", and "Raised" enhance sorting options and navigation features.
public/locales/hi/translation.json (37)
332-332: Correct the translation for "Create Fund".The translation for "Create Fund" should be consistent with the context. The current translation is correct.
334-334: Correct the translation for "Fund (Reference) ID".The translation for "Fund (Reference) ID" is accurate and consistent with the changes mentioned in the PR summary.
335-335: Correct the translation for "Tax Deductible".The translation for "Tax Deductible" is accurate and consistent with the changes mentioned in the PR summary.
336-336: Correct the translation for "Default".The translation for "Default" is accurate and consistent with the changes mentioned in the PR summary.
337-337: Correct the translation for "Archived".The translation for "Archived" is accurate and consistent with the changes mentioned in the PR summary.
338-338: Correct the translation for "Create Fund".The translation for "Create Fund" is accurate and consistent with the changes mentioned in the PR summary.
339-339: Correct the translation for "Update Fund".The translation for "Update Fund" is accurate and consistent with the changes mentioned in the PR summary.
340-340: Correct the translation for "Delete Fund".The translation for "Delete Fund" is accurate and consistent with the changes mentioned in the PR summary.
343-343: Correct the translation for "No Funds Found".The translation for "No Funds Found" is accurate and consistent with the changes mentioned in the PR summary.
348-348: Correct the translation for "Fund Created".The translation for "Fund Created" is accurate and consistent with the changes mentioned in the PR summary.
349-349: Correct the translation for "Fund Deleted".The translation for "Fund Deleted" is accurate and consistent with the changes mentioned in the PR summary.
350-350: Correct the translation for "Delete Fund Message".The translation for "Delete Fund Message" is accurate and consistent with the changes mentioned in the PR summary.
352-352: Correct the translation for "View Campaigns".The translation for "View Campaigns" is accurate and consistent with the changes mentioned in the PR summary.
355-355: Correct the translation for "Fundraising Campaign".The translation for "Fundraising Campaign" is accurate and consistent with the changes mentioned in the PR summary.
356-356: Correct the translation for "Campaign Name".The translation for "Campaign Name" is accurate and consistent with the changes mentioned in the PR summary.
358-358: Correct the translation for "Funding Goal".The translation for "Funding Goal" is accurate and consistent with the changes mentioned in the PR summary.
359-359: Correct the translation for "Add Campaign".The translation for "Add Campaign" is accurate and consistent with the changes mentioned in the PR summary.
360-360: Correct the translation for "Campaign Created".The translation for "Campaign Created" is accurate and consistent with the changes mentioned in the PR summary.
361-361: Correct the translation for "Campaign Updated".The translation for "Campaign Updated" is accurate and consistent with the changes mentioned in the PR summary.
362-362: Correct the translation for "Campaign Deleted".The translation for "Campaign Deleted" is accurate and consistent with the changes mentioned in the PR summary.
363-363: Correct the translation for "Delete Campaign Message".The translation for "Delete Campaign Message" is accurate and consistent with the changes mentioned in the PR summary.
364-364: Correct the translation for "No Campaigns".The translation for "No Campaigns" is accurate and consistent with the changes mentioned in the PR summary.
365-365: Correct the translation for "Create Campaign".The translation for "Create Campaign" is accurate and consistent with the changes mentioned in the PR summary.
366-366: Correct the translation for "Update Campaign".The translation for "Update Campaign" is accurate and consistent with the changes mentioned in the PR summary.
367-367: Correct the translation for "Delete Campaign".The translation for "Delete Campaign" is accurate and consistent with the changes mentioned in the PR summary.
369-369: Correct the translation for "Select Currency".The translation for "Select Currency" is accurate and consistent with the changes mentioned in the PR summary.
371-371: Correct the translation for "View Pledges".The translation for "View Pledges" is accurate and consistent with the changes mentioned in the PR summary.
372-372: Correct the translation for "No Campaigns Found".The translation for "No Campaigns Found" is accurate and consistent with the changes mentioned in the PR summary.
373-373: Correct the translation for "Latest End Date".The translation for "Latest End Date" is accurate and consistent with the changes mentioned in the PR summary.
374-374: Correct the translation for "Earliest End Date".The translation for "Earliest End Date" is accurate and consistent with the changes mentioned in the PR summary.
375-375: Correct the translation for "Lowest Goal".The translation for "Lowest Goal" is accurate and consistent with the changes mentioned in the PR summary.
376-376: Correct the translation for "Highest Goal".The translation for "Highest Goal" is accurate and consistent with the changes mentioned in the PR summary.
400-400: Correct the translation for "Earliest End Date".The translation for "Earliest End Date" is accurate and consistent with the changes mentioned in the PR summary.
401-401: Correct the translation for "Campaigns".The translation for "Campaigns" is accurate and consistent with the changes mentioned in the PR summary.
402-402: Correct the translation for "Pledges".The translation for "Pledges" is accurate and consistent with the changes mentioned in the PR summary.
403-403: Correct the translation for "Ends On".The translation for "Ends On" is accurate and consistent with the changes mentioned in the PR summary.
404-404: Correct the translation for "Raised".The translation for "Raised" is accurate and consistent with the changes mentioned in the PR summary.
public/locales/fr/translation.json (15)
334-334: Accurate Translation.The translation of "Fund ID" to "ID de référence du fonds" is accurate and improves clarity.
335-335: Accurate Translation.The translation of "taxDeductible" to "Déductible d'impôt" is accurate and maintains the intended meaning.
336-336: Accurate Translation.The translation of "default" to "Par défaut" is accurate and maintains the intended meaning.
341-341: Accurate Translation.The translation of "searchByName" to "Rechercher par nom" is accurate and maintains the intended meaning.
344-344: Accurate Translation.The translation of "createdOn" to "Créé le" is accurate and maintains the intended meaning.
349-349: Accurate Translation.The translation of "deleteFundMsg" to "Êtes-vous sûr de vouloir supprimer ce fonds ?" is accurate and maintains the intended meaning.
350-351: Accurate Translation.The translations of "createdLatest" to "Créé le plus récemment" and "createdEarliest" to "Créé le plus tôt" are accurate and maintain the intended meanings.
352-352: Accurate Translation.The translation of "viewCampaigns" to "Voir les campagnes" is accurate and maintains the intended meaning.
357-357: Accurate Translation.The translation of "campaignOptions" to "Options" is accurate and maintains the intended meaning.
363-363: Accurate Translation.The translation of "deleteCampaignMsg" to "Êtes-vous sûr de vouloir supprimer cette campagne ?" is accurate and maintains the intended meaning.
365-367: Accurate Translation.The translations of "createCampaign" to "Créer une campagne," "updateCampaign" to "Mettre à jour la campagne," and "deleteCampaign" to "Supprimer la campagne" are accurate and maintain the intended meanings.
369-369: Accurate Translation.The translation of "selectCurrency" to "Sélectionner la devise" is accurate and maintains the intended meaning.
371-372: Accurate Translation.The translations of "viewPledges" to "Voir les promesses de dons" and "noCampaignsFound" to "Aucune campagne trouvée" are accurate and maintain the intended meanings.
373-376: Accurate Translation.The translations of "latestEndDate" to "Dernière date de fin," "earliestEndDate" to "Date de fin la plus ancienne," "lowestGoal" to "Objectif le plus bas," and "highestGoal" to "Objectif le plus élevé" are accurate and maintain the intended meanings.
400-404: Accurate Translation.The translations of "earliestEndDate" to "Date de fin la plus proche," "campaigns" to "Campagnes," "pledges" to "Promesses de dons," "endsOn" to "Se termine le," and "raised" to "Levé" are accurate and maintain the intended meanings.
public/locales/sp/translation.json (7)
459-460: Update Translation for Fund IDThe translation for "Fund ID" has been updated to "ID de referencia del fondo". This change improves clarity by specifying that it is a reference ID.
462-462: Update Translation for Default FundThe translation for "Default Fund" has been updated to "Predeterminado". This change removes redundancy and improves consistency.
464-478: Add New Translations for Fund ManagementNew translations have been added for various fund management actions and statuses. These translations improve the user interface by providing clear and concise labels for fund-related actions.
483-484: Update Translation for Campaign OptionsThe translation for "Options" has been updated to "Opciones". This change improves consistency and clarity.
486-493: Add New Translations for Campaign ManagementNew translations have been added for various campaign management actions and statuses. These translations enhance the user interface by providing clear and concise labels for campaign-related actions.
496-502: Add New Translations for Campaign Sorting and FilteringNew translations have been added for sorting and filtering campaigns. These translations improve the user experience by providing clear options for sorting and filtering campaign data.
528-532: Add New Translations for Pledge ManagementNew translations have been added for various pledge management actions and statuses. These translations improve the user interface by providing clear and concise labels for pledge-related actions.
There was a problem hiding this comment.
Actionable comments posted: 6
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (3)
- src/screens/FundCampaignPledge/FundCampaignPledge.tsx (13 hunks)
- src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx (4 hunks)
- src/screens/OrganizationFunds/OrganizationFunds.tsx (3 hunks)
Files skipped from review as they are similar to previous changes (1)
- src/screens/FundCampaignPledge/FundCampaignPledge.tsx
Additional context used
Learnings (2)
src/screens/OrganizationFunds/OrganizationFunds.tsx (8)
Learnt from: GlenDsza PR: PalisadoesFoundation/talawa-admin#2064 File: src/screens/OrganizationFunds/OrganizationFunds.tsx:265-275 Timestamp: 2024-06-30T21:29:15.697Z Learning: When suggesting adding keyboard events for accessibility, consider potential user confusion and explore alternative approaches like tooltips or visual indicators to balance accessibility and user experience.Learnt from: GlenDsza PR: PalisadoesFoundation/talawa-admin#2064 File: src/screens/OrganizationFunds/OrganizationFunds.tsx:165-169 Timestamp: 2024-06-30T21:28:40.885Z Learning: When suggesting adding keyboard events for accessibility, consider potential user confusion and explore alternative approaches like tooltips or visual indicators to balance accessibility and user experience.Learnt from: GlenDsza PR: PalisadoesFoundation/talawa-admin#2064 File: src/screens/OrganizationFunds/OrganizationFunds.tsx:229-252 Timestamp: 2024-06-30T21:44:02.495Z Learning: When adding keyboard events for accessibility, consider potential user confusion and unintended navigations. Explore alternative approaches like tooltips or visual indicators to inform users about keyboard functionalities.Learnt from: GlenDsza PR: PalisadoesFoundation/talawa-admin#2064 File: src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx:170-174 Timestamp: 2024-06-30T21:47:17.853Z Learning: GlenDsza prefers not to use keyboard events for accessibility in the context of the `OrganizationFundCampaigns.tsx` screen to avoid adding complexity or potential user confusion.Learnt from: GlenDsza PR: PalisadoesFoundation/talawa-admin#2064 File: src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx:287-297 Timestamp: 2024-06-30T21:47:03.407Z Learning: GlenDsza prefers not to use keyboard events for accessibility in the context of the `OrganizationFundCampaigns.tsx` screen to avoid adding complexity or potential user confusion.Learnt from: GlenDsza PR: PalisadoesFoundation/talawa-admin#2064 File: src/screens/OrganizationFunds/OrganizationFunds.tsx:66-72 Timestamp: 2024-06-30T21:27:17.104Z Learning: Renaming the Enum `Modal` to `ModalState` in the `organizationFunds` component is unnecessary and does not change the functionality.Learnt from: GlenDsza PR: PalisadoesFoundation/talawa-admin#2064 File: src/screens/OrganizationFunds/FundDeleteModal.tsx:1-2 Timestamp: 2024-06-30T21:44:39.912Z Learning: The folder containing mutation queries in the codebase is named `GraphQl`, not `graphql`.Learnt from: GlenDsza PR: PalisadoesFoundation/talawa-admin#2064 File: src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx:43-46 Timestamp: 2024-06-30T21:50:22.966Z Learning: GlenDsza prefers descriptive and consistent naming for enum values in modal states, as demonstrated in the PR PalisadoesFoundation/talawa-admin#2064.src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx (9)
Learnt from: GlenDsza PR: PalisadoesFoundation/talawa-admin#2064 File: src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx:170-174 Timestamp: 2024-06-30T21:47:17.853Z Learning: GlenDsza prefers not to use keyboard events for accessibility in the context of the `OrganizationFundCampaigns.tsx` screen to avoid adding complexity or potential user confusion.Learnt from: GlenDsza PR: PalisadoesFoundation/talawa-admin#2064 File: src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx:287-297 Timestamp: 2024-06-30T21:47:03.407Z Learning: GlenDsza prefers not to use keyboard events for accessibility in the context of the `OrganizationFundCampaigns.tsx` screen to avoid adding complexity or potential user confusion.Learnt from: GlenDsza PR: PalisadoesFoundation/talawa-admin#2064 File: src/screens/OrganizationFunds/OrganizationFunds.tsx:265-275 Timestamp: 2024-06-30T21:29:15.697Z Learning: When suggesting adding keyboard events for accessibility, consider potential user confusion and explore alternative approaches like tooltips or visual indicators to balance accessibility and user experience.Learnt from: GlenDsza PR: PalisadoesFoundation/talawa-admin#2064 File: src/screens/OrganizationFunds/OrganizationFunds.tsx:165-169 Timestamp: 2024-06-30T21:28:40.885Z Learning: When suggesting adding keyboard events for accessibility, consider potential user confusion and explore alternative approaches like tooltips or visual indicators to balance accessibility and user experience.Learnt from: GlenDsza PR: PalisadoesFoundation/talawa-admin#2064 File: src/screens/OrganizationFunds/OrganizationFunds.tsx:229-252 Timestamp: 2024-06-30T21:44:02.495Z Learning: When adding keyboard events for accessibility, consider potential user confusion and unintended navigations. Explore alternative approaches like tooltips or visual indicators to inform users about keyboard functionalities.Learnt from: GlenDsza PR: PalisadoesFoundation/talawa-admin#2064 File: src/screens/OrganizationFundCampaign/CampaignDeleteModal.tsx:4-5 Timestamp: 2024-06-30T21:17:16.481Z Learning: The folder containing mutation queries in the codebase is named `GraphQl`, not `graphql`.Learnt from: GlenDsza PR: PalisadoesFoundation/talawa-admin#2064 File: src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx:43-46 Timestamp: 2024-06-30T21:50:22.966Z Learning: GlenDsza prefers descriptive and consistent naming for enum values in modal states, as demonstrated in the PR PalisadoesFoundation/talawa-admin#2064.Learnt from: GlenDsza PR: PalisadoesFoundation/talawa-admin#2064 File: src/screens/OrganizationFunds/OrganizationFunds.tsx:66-72 Timestamp: 2024-06-30T21:27:17.104Z Learning: Renaming the Enum `Modal` to `ModalState` in the `organizationFunds` component is unnecessary and does not change the functionality.Learnt from: GlenDsza PR: PalisadoesFoundation/talawa-admin#2064 File: src/screens/OrganizationFunds/FundDeleteModal.tsx:1-2 Timestamp: 2024-06-30T21:44:39.912Z Learning: The folder containing mutation queries in the codebase is named `GraphQl`, not `graphql`.
Biome
src/screens/OrganizationFunds/OrganizationFunds.tsx
[error] 167-171: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx
[error] 175-179: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
Additional comments not posted (4)
src/screens/OrganizationFunds/OrganizationFunds.tsx (1)
57-58: Ensure graceful handling whenorgIdis undefined.The current implementation redirects to the homepage if
orgIdis not found. Consider adding a user-friendly message or logging this event for better user experience and debugging.src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx (3)
1-18: Imports are appropriate and well-organized.
25-44: Ensure accessibility when customizing styles.Custom styles in
dataGridStyleremove focus outlines, which are crucial for keyboard navigation accessibility. Consider keeping or customizing the focus styles instead of removing them to support all users.
175-179: Add keyboard accessibility to clickable elements.The clickable campaign name in the data grid should be accessible via keyboard. Consider adding a
tabIndex="0"and appropriate keyboard event handlers.175a176,178 + tabIndex={0} + onKeyDown={(e) => e.key === 'Enter' && handleClick(params.row.campaign._id as string)}Skipped due to learnings
Learnt from: GlenDsza PR: PalisadoesFoundation/talawa-admin#2064 File: src/screens/OrganizationFunds/OrganizationFunds.tsx:229-252 Timestamp: 2024-06-30T21:44:02.495Z Learning: When adding keyboard events for accessibility, consider potential user confusion and unintended navigations. Explore alternative approaches like tooltips or visual indicators to inform users about keyboard functionalities.Learnt from: GlenDsza PR: PalisadoesFoundation/talawa-admin#2064 File: src/screens/OrganizationFunds/OrganizationFunds.tsx:165-169 Timestamp: 2024-06-30T21:28:40.885Z Learning: When suggesting adding keyboard events for accessibility, consider potential user confusion and explore alternative approaches like tooltips or visual indicators to balance accessibility and user experience.Learnt from: GlenDsza PR: PalisadoesFoundation/talawa-admin#2064 File: src/screens/OrganizationFunds/OrganizationFunds.tsx:265-275 Timestamp: 2024-06-30T21:29:15.697Z Learning: When suggesting adding keyboard events for accessibility, consider potential user confusion and explore alternative approaches like tooltips or visual indicators to balance accessibility and user experience.Learnt from: GlenDsza PR: PalisadoesFoundation/talawa-admin#2064 File: src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx:170-174 Timestamp: 2024-06-30T21:47:17.853Z Learning: GlenDsza prefers not to use keyboard events for accessibility in the context of the `OrganizationFundCampaigns.tsx` screen to avoid adding complexity or potential user confusion.Learnt from: GlenDsza PR: PalisadoesFoundation/talawa-admin#2064 File: src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx:287-297 Timestamp: 2024-06-30T21:47:03.407Z Learning: GlenDsza prefers not to use keyboard events for accessibility in the context of the `OrganizationFundCampaigns.tsx` screen to avoid adding complexity or potential user confusion.Tools
Biome
[error] 175-179: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
|
@GlenDsza What will be the view if we have more numbers of volunteers ? |
…awa-admin into re_fund_campaign
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (4)
- src/screens/FundCampaignPledge/FundCampaignPledge.module.css (2 hunks)
- src/screens/FundCampaignPledge/FundCampaignPledge.test.tsx (1 hunks)
- src/screens/FundCampaignPledge/FundCampaignPledge.tsx (16 hunks)
- src/screens/FundCampaignPledge/PledgesMocks.ts (6 hunks)
Files skipped from review as they are similar to previous changes (2)
- src/screens/FundCampaignPledge/FundCampaignPledge.module.css
- src/screens/FundCampaignPledge/PledgesMocks.ts
Additional comments not posted (20)
src/screens/FundCampaignPledge/FundCampaignPledge.test.tsx (2)
282-285: LGTM! Test case for image rendering is correct.The test case correctly verifies the presence of the image and its
srcattribute.
287-317: LGTM! Test case for extra user details in a popup is correct.The test case correctly verifies the presence of extra user details and handles the popup interactions.
src/screens/FundCampaignPledge/FundCampaignPledge.tsx (18)
5-5: LGTM! New imports are necessary and correctly used.The new imports include MUI components, react-bootstrap components, and utility functions, which are correctly utilized in the component.
Also applies to: 15-22
33-39: LGTM! The new interfaceInterfaceCampaignInfois correctly defined.The interface defines the structure for campaign information, which improves type safety and readability.
41-43: LGTM! The new enumModalStateis correctly defined.The enum defines modal states, which improves code readability and maintainability.
46-65: LGTM! The new constantdataGridStyleis correctly defined.The constant defines styles for the data grid, improving the visual layout.
67-77: LGTM! The updatedBorderLinearProgresscomponent is correctly defined and styled.The component uses MUI's
styledfunction to apply custom styles, improving the visual layout.
90-96: LGTM! Initial state forcampaignInfois correctly defined.The initial state for
campaignInfoensures that the component has a consistent starting point.
98-104: LGTM! Initial state formodalStateis correctly defined.The initial state for
modalStateensures that the modals have a consistent starting point.
105-108: LGTM! State for anchor and extraUsers is correctly defined.The state for anchor and extraUsers ensures that the popup functionality works correctly.
159-169: LGTM! TheuseEffecthook correctly updatescampaignInfobased onpledgeData.The
useEffecthook ensures thatcampaignInfois updated wheneverpledgeDatachanges.
175-179: LGTM! TheopenModalfunction is correctly defined.The
openModalfunction correctly updates the modal state.
179-181: LGTM! ThecloseModalfunction is correctly defined.The
closeModalfunction correctly updates the modal state.
200-206: LGTM! ThehandleClickfunction is correctly defined.The
handleClickfunction correctly updates the anchor and extraUsers state.
Line range hint
228-271: LGTM! Thecolumnsdefinition for the data grid is correct.The
columnsdefinition ensures that the data grid displays the correct information with appropriate styles.
396-420: LGTM! TheBreadcrumbscomponent is correctly defined.The
Breadcrumbscomponent improves navigation within the application.
421-437: LGTM! The campaign overview section is correctly defined.The campaign overview section provides a clear summary of the campaign's progress.
Line range hint
438-494: LGTM! The search and sort functionality is correctly defined.The search and sort functionality allows users to filter and sort the pledges list effectively.
Line range hint
515-540: LGTM! TheDataGridcomponent is correctly defined.The
DataGridcomponent displays the pledges list with appropriate styles and functionalities.
558-594: LGTM! TheBasePopupcomponent is correctly defined.The
BasePopupcomponent displays extra user details in a popup, enhancing the user experience.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (4)
- public/locales/en/translation.json (3 hunks)
- public/locales/fr/translation.json (2 hunks)
- public/locales/hi/translation.json (2 hunks)
- public/locales/zh/translation.json (2 hunks)
Files skipped from review as they are similar to previous changes (4)
- public/locales/en/translation.json
- public/locales/fr/translation.json
- public/locales/hi/translation.json
- public/locales/zh/translation.json
|
@tasneemkoushar Added code to view additional volunteers in a scroll-enabled popup. Plz review view_all_volunteers.mp4 |
…awa-admin into re_fund_campaign
…to re_fund_campaign
|
@tasneemkoushar PTAL |
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (1)
- src/screens/OrganizationFunds/OrganizationFunds.tsx (3 hunks)
Files skipped from review as they are similar to previous changes (1)
- src/screens/OrganizationFunds/OrganizationFunds.tsx
|
@GlenDsza LGTM feel free to merge |
GlenDsza
dismissed stale reviews from tasneemkoushar and coderabbitai[bot]
via
9eb5c99
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (1)
- src/screens/FundCampaignPledge/FundCampaignPledge.tsx (15 hunks)
Additional context used
Learnings (1)
src/screens/FundCampaignPledge/FundCampaignPledge.tsx (1)
Learnt from: GlenDsza PR: PalisadoesFoundation/talawa-admin#2064 File: src/screens/OrganizationFunds/OrganizationFunds.tsx:66-72 Timestamp: 2024-06-30T21:27:17.104Z Learning: Renaming the Enum `Modal` to `ModalState` in the `organizationFunds` component is unnecessary and does not change the functionality.
Additional comments not posted (19)
src/screens/FundCampaignPledge/FundCampaignPledge.tsx (19)
5-5: Ensure the stability of Unstable_Popup.The
Unstable_Popupcomponent from@mui/baseis used. Ensure that its stability and future support are confirmed.
26-32: InterfaceInterfaceCampaignInfolooks good.The new interface
InterfaceCampaignInfois well-defined and promotes type safety.
34-38: EnumModalStatelooks good.The new enum
ModalStateis well-defined and aligns with the updated naming conventions.
39-58: DataGrid styles look good.The DataGrid styles are well-defined and consistent with the overall design.
71-76: State initialization forcampaignInfolooks good.The initial state for
campaignInfois well-defined and promotes clarity.
79-84: State initialization formodalStatelooks good.The initial state for
modalStateis well-defined and aligns with the new enumModalState.
145-155: Effect hook for updatingcampaignInfolooks good.The
useEffecthook for updatingcampaignInfobased onpledgeDatais well-implemented.
131-142: Memoized pledges and total pledged amount look good.The
useMemohook is correctly used to memoize pledges and the total pledged amount, improving performance.
88-90: State initialization forprogressIndicatorlooks good.The initial state for
progressIndicatoris well-defined and promotes clarity.
161-165: Modal handling functions look good.The functions for opening and closing modals are well-implemented and align with the new enum
ModalState.
186-192: Event handler for displaying extra users looks good.The event handler for displaying extra users in a popup is well-implemented and enhances user experience.
Line range hint
212-257:
Rendering logic forpledgerscolumn looks good.The rendering logic for the
pledgerscolumn is well-implemented and enhances user experience.
Line range hint
291-336:
Rendering logic foramountanddonatedcolumns looks good.The rendering logic for the
amountanddonatedcolumns is well-implemented and accurately represents the data.
382-406: Breadcrumbs component looks good.The Breadcrumbs component is well-implemented and enhances navigation.
453-465: Progress bar component looks good.The progress bar component is well-implemented and provides clear visual feedback on fundraising progress.
472-478: Search functionality looks good.The search functionality is well-implemented and enhances user experience.
Line range hint
544-569:
Sort functionality looks good.The sort functionality is well-implemented and enhances user experience.
571-587: Modals for updating and deleting pledges look good.The modals for updating and deleting pledges are well-implemented and enhance user experience.
587-623: BasePopup component looks good.The BasePopup component is well-implemented and enhances user experience by displaying extra users in an organized manner.
tasneemkoushar
merged commit d440ad4
into
PalisadoesFoundation:develop
What kind of change does this PR introduce?
feature, redesign, refactoring
Issue Number:
Fixes #1927
Did you add tests for your changes?
Yes
Snapshots/Videos:
Fund Screen:
Campaign Screen:
Pledge Screen:
Video:
final.mp4
Summary
Does this PR introduce a breaking change?
No
Other information
Have you read the contributing guide?
Yes
Summary by CodeRabbit
New Features
DataGridfor displaying fund information.FundModalandFundDeleteModalfor improved fund management.Improvements
Bug Fixes
Refactor
OrganizationFunds.tsxfor improved code maintainability and readability.FundModalcomponent.FundCampaignPledge.tsx.